<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>
		<title>The Gimme Javascript Library :: Test Page</title>

		<script type = "text/javascript" src = "../build/debug/gimme.js"></script>
		<script type = "text/javascript" src = "../src/gimme.caspiancompat.js"></script>
		<script type = "text/javascript">

			g(window).add_event('load', function(e)
			{
				var currentAction = 'slide';
				g('input[type=radio]').add_event('click', function(e)
				{
					e.stopPropagation();
					currentAction = this.value;
				});
				g('label').add_event('click', function(e) { e.stopPropagation(); });
				
				g(document.body).add_event('click', function(e)
				{
					switch (currentAction)
					{
						case 'slide':
							slide(e);
							break;
						
						case 'bounce':
							bounce(e);
							break;
					}
				});
				
			});
			
			Gimme.ext.bounceTo = function(to, duration, guid, callback)
			{
				var animations = this.map(function(el)
				{
					return new Gimme.Effects.Animation(
						{
							from: { top: Gimme(el).get_style_pos().y },
							to: { top: to },
							duration: duration,
							elements: [ el ],
							animate: function(elem, props)
							{
								elem.style.top = Math.ceil(props.top) + 'px';
							},
							easing: Gimme.Effects.Easing.Bounce.ease_out
						}
					);
				});
				
				var sb = new Gimme.Effects.Storyboard(
				{
					duration: duration,
					animations: animations
				});
				sb.begin();
			}

			function slide(e)
			{
				g('*[id^=obj]').slide(null, Gimme.Screen.get_mouse_pos(e), 750, 'SLIDE');
			}
			
			function bounce(e)
			{
				g('*[id^=obj]').bounce(0, 300, 1500);
			}
			
		/*
		var sb;
		window.onload = function()
		{
			sb = new Gimme.Effects.Storyboard(
			{
				duration: 2500,
				animations:
				[
					new Gimme.Effects.Animation(
						{
							from: { left: 0 },
							to: { left: 800 },
							duration: 1000,
							startTime: 1000,
							animate: function(elem, props)
							{
								elem.style.left = props.left + 'px';
							},
							easing: Gimme.Effects.Easing.Elastic.ease_out,
							elements: [ document.getElementById('obj3') ]
						}
					),
					
					new Gimme.Effects.Animation(
						{
							from: { top: 0 },
							to: { top: 500 },
							duration: 1000,
							startTime: 1500,
							animate: function(elem, props)
							{
								elem.style.top = props.top + 'px';
							},
							easing: Gimme.Effects.Easing.Bounce.ease_out,
							elements: [ document.getElementById('obj2') ]
						}
					),
					
					new Gimme.Effects.Animation(
						{
							from: { opacity: 1 },
							to: { opacity: .1 },
							duration: 500,
							startTime: 2000,
							animate: function(elem, props)
							{
								elem.style.opacity = props.opacity;
							},
							elements: [ document.getElementById('obj1') ]
						}
					)
				],
				
				completed: function()
				{
					sb.reverse();
					sb.resume();
				}
			});
		};
		*/
		</script>
	
		<style type = "text/css">
			html, body
			{
				height: 100%;
			}
			
			#obj1, #obj2, #obj3
			{
				position: absolute;
				height: 50px;
				width: 50px;
			}
			#obj1
			{
				top: 250px;
				left: 0;
				background: red;
			}			
			#obj2
			{
				position: relative;
				top: 250px;
				left: 300px;
				margin-top: 100px;
				background: blue;
			}
			#obj3
			{
				/*top: 250px;*/
				top: 30%;
				left: 500px;
				background: orange;
			}
		</style>
	</head>

	<body>
		<input id = "rdoSlide" type = "radio" name = "switch" value = "slide" checked = "checked"><label for = "rdoSlide">Slide</label>
		<input id = "rdoBounce" type = "radio" name = "switch" value = "bounce"><label for = "rdoBounce">Bounce</label>
		<div id = "obj1"></div>
		<div id = "obj2"></div>
		<div id = "obj3"></div>
		
		<div style="position:relative;padding:50px;border:2px solid green;">
		<div id = "s" style="position:relative">Steve</div>
		<div id = "e" style="position:relative">Emily</div>
		</div>
	</body>

</html>